<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<!-- 
			
			ajax https://baike.baidu.com/item/AJAX/8425
			
			作用页面的局部刷新 与服务器端进行数据交互
			
			ajax 请求<==>相应的一个过程
			
			ajax的请求相应模型需要记住 
		 
			在jq中使用ajax
		 
		-->
		<!-- 
			
			前后端分离，接口开发页面应用时，一定要先写页面样式布局，然后再去调用接口
		 
		-->
		<div class="tqyb">
			<div class="temp">30℃</div>
			<div class="state">阴</div>
		</div>
		
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
		<script>
			
			// jq的ajax应用
			// $.ajax({
			// 	url: 'xxx.xxx/xxx/xxx', //被请求的功能的路径
			//  type: 'get|post', //请求方式
			//  dataType: 'json|xml|text', //返回数据的格式
			//  data: {}, //请求时需要携带的参数
			//  timeout: 3000, //请求超时
			//  success: function(res){  // 请求成功时的数据处理
			// 	
			//  },
			//  error: function(res){  // 请求失败时的数据处理
			// 	
			//  },
			//  complete:  function(res){  // 请求完成（成功或者失败）时的数据处理
			// 	
			//  },
			// })
			
			/* 
				和风天气
				官网  https://console.heweather.com/
				接口(api) 文档 https://dev.heweather.com/docs/start/
				
				appid   HE1908191547271568
				appkey  92082599e33046d593a72d1c894fef54
				
			*/
		   
			$.ajax({
				// https://dev.heweather.com/docs/api/weather 天气
				url: 'https://devapi.heweather.net/v7/weather/now',
				// url: 'https://devapi.heweather.net/v7/weather/3d',
				type: 'get',
				dataType: 'json',
				data: {
					location: '117.216818,39.121387',
					key: '92082599e33046d593a72d1c894fef54'
				},
				success: function(res){
					console.log(res);
					console.log(res.now);
					$('.temp').text(res.now.temp);
					$('.state').text(res.now.text);
				}
				
			})
			
			/* 
				作业：
				https://www.baidu.com/s?ie=UTF-8&wd=%E5%A4%A9%E6%B0%94（相关指数）
			 
			*/
			
		</script>
	</body>
</html>
